<template>

  <div>
    <nav class="navbar navbar-default navbar-fixed-top header">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
          >
            <span class="sr-only">实验楼</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a
            class="navbar-brand"
            href="/"
          >
            <img src="/static/img/logo_03.png">
          </a>
        </div>
        <div
          class="collapse navbar-collapse"
          id="header-navbar-collapse"
        >
          <ul class="nav navbar-nav">
            <li class="dropdown ">
              <a
                href="/courses"
                class="dropdown-toggle"
                data-toggle="dropdown"
              >
                课程
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a
                    class=""
                    href="/courses"
                  >全部课程</a></li>
                <li><a
                    class=""
                    href=""
                  >即将上线</a></li>
                <li><a
                    class=""
                    href=""
                  >开发者</a></li>
              </ul>
            </li>
            <li class="">
              <a href="/paths">路径</a>
            </li>
            <li class="">
              <a href="/questions">讨论区</a>
            </li>
            <li class=" bootcamp new-nav logo-1111">
              <a href="/bootcamp">训练营</a>

            </li>
            <li class=" new-nav logo-1111">
              <a href="/vip">会员</a>

            </li>

          </ul>

          <div class="navbar-right btns">
            <div v-if='login_username'>
              <a
                class="btn btn-default navbar-btn sign-in"
                data-sign="signin"
                data-toggle="modal"
                href='/user'
              >消息</a>
              <a
                class="btn btn-default navbar-btn sign-in"
                data-sign="signin"
                data-toggle="modal"
                href='/user'
              >{{ login_username }}</a>
              <a
                class="btn btn-default navbar-btn sign-up"
                data-sign="signup"
                data-toggle="modal"
                @click="logout"
              >注销</a>
            </div>
            <div v-else>
              <a
                class="btn btn-default navbar-btn sign-in"
                data-sign="signin"
                data-toggle="modal"
                @click="change_login"
              >登录</a>
              <a
                class="btn btn-default navbar-btn sign-up"
                data-sign="signup"
                data-toggle="modal"
                @click="change_regist"
              >注册</a>
            </div>
          </div>

          <form
            class="navbar-form navbar-right"
            action="search"
            method="get"
            role="search"
          >
            <div class="form-group">
              <Search
                @search="search"
                v-model="keyword"
                v-width="300"
                showSearchButton
                placeholder="搜索 课程/问答"
              ><i class="h-icon-search"></i></Search>
            </div>
          </form>
        </div>
      </div>
    </nav>

    <div>
      <Modal v-model="opened">
        <div slot="header">
          <div>
            <div style='padding:10px'></div>
            <div>
              <SwitchList
                v-model="login_or_regist"
                :datas="login_or_regist_chioce"
              ></SwitchList>
            </div>
          </div>
          <div
            v-if="login_or_regist=='登录'"
            style='padding:20px 20px 0px 5px'
          >

            <div
              role="tabpanel"
              class="tab-pane active"
              id="signin-form"
            >
              <form
                action="/login"
                method="post"
              >
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-envelope"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      type="text"
                      name="login"
                      class="form-control"
                      v-model="username"
                      placeholder="请输入用户名或手机号"
                    >
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-lock"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      type="password"
                      name="password"
                      class="form-control"
                      v-model="password"
                      placeholder="请输入密码"
                    >
                  </div>
                </div>
                <div
                  class="form-inline verify-code-item"
                  style="display:none;"
                >
                  <div class="form-group">
                    <div class="input-group">
                      <input
                        type="text"
                        name="captcha_v"
                        class="form-control"
                        placeholder="请输入验证码"
                      >
                    </div>
                  </div>
                  <img
                    class="verify-code"
                    src=""
                    source="https://www.shiyanlou.com/captcha.gif"
                  >
                </div>
                <div class="form-group remember-login">
                  <input
                    name="remember"
                    type="checkbox"
                    value="y"
                  > 下次自动登录
                  <a
                    class="pull-right"
                    href=""
                  >忘记密码？</a>
                </div>
                <div class="form-group">

                  <div v-width="300"><Button
                      class="h-btn h-btn-text-green h-btn-block"
                      @click="login"
                    >进入实验楼</Button></div>
                  <div>{{errorMsg}}</div>
                </div>
                <div class="form-group widget-signin">
                  <img
                    :src="sinaimg"
                    style="cursor:pointer"
                    @click="sina"
                  >
                  <img
                    :src="dingimg"
                    style="cursor:pointer"
                    @click="dingding"
                  >
                </div>
              </form>
            </div>

          </div>
          <div
            v-else
            style='padding:20px 20px 0px 5px'
          >

            <div
              role="tabpanel"
              class="tab-pane"
              id="signup-form"
            >
              <form
                action="/register"
                method="post"
              >
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-envelope"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      type="username"
                      name="username"
                      class="form-control"
                      v-model="username"
                      @blur="check_username"
                      placeholder="请输入用户名"
                    >
                  </div>
                  <p
                    v-show='username_error'
                    style="color: red"
                  >{{ username_message }}</p>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-envelope"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      name="phone"
                      class="form-control"
                      v-model="phone"
                      placeholder="请输入手机号"
                      @blur="check_phone"
                    >
                  </div>
                  <div v-if="phone_error"><span style="color:red">{{phone_message}}</span></div>

                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-lock"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      type="password"
                      class="form-control"
                      v-model="password"
                      placeholder="请输入密码"
                    >
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i
                        class="fa fa-lock"
                        style="margin:0;"
                      ></i>
                    </div>
                    <input
                      type="password"
                      class="form-control"
                      v-model="password2"
                      placeholder="请确认密码"
                      @blur="check_password"
                    >
                  </div>
                  <div v-if='password_error'><span style="color:red">{{password_message}}</span></div>
                </div>
                <div class="form-inline">
                  <div class="form-group">
                    <div class="input-group">
                      <input
                        type="text"
                        v-model='imgCode'
                        placeholder="输入图形验证码"
                        @blur="check_imgcode"
                      >
                      <span
                        v-show='imgCode_error'
                        style="color:red"
                      >{{imgCode_message}}</span>
                      <img
                        class="verify-code"
                        :src="imgUrl"
                        @click="getImgUrl"
                      >

                      <input
                        type="text"
                        v-model="code"
                        class="form-control"
                        placeholder="请输入短信验证码"
                        @blur="check_msgcode"
                      >
                      <Button @click="sendcode">{{msgButtonText}}</Button>
                    </div>
                    <div v-if='msgcode_error'><span style="color:red">{{msgcode_message}}</span></div>
                  </div>
                  <div>
                    <span style="color: red">{{errorMsg}}</span>
                  </div>
                </div>
                <div class="form-group">
                  <br />
                  <div v-width="300"><Button
                      class="h-btn h-btn-text-green h-btn-block"
                      @click='regist'
                    >注册</Button></div>
                </div>
                <div class="form-group agree-privacy">
                  注册表示您已经同意我们的<a
                    href="/privacy"
                    target="_blank"
                  >隐私条款</a>
                </div>
                <div class="form-group widget-signup">
                  <span>快速注册</span>
                  <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                  <a @click="oauth"><i class="fa fa-weibo"></i></a>
                  <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                  <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                  <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                </div>
              </form>
            </div>

          </div>
        </div>
        <div>

        </div>
        <div slot="footer"><button
            class="h-btn"
            @click="opened=false"
          >取消</button></div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { oauth_post, login_post, register_post, send_phone_code_post, search_data_get } from '../axios_api/api'
import { user_count } from '../axios_api/api';
import { config, formatXml } from '../../config.js';
export default {
  data() {
    return {
      opened: false,
      // 注册登录选项卡
      login_or_regist: '登录',
      login_or_regist_chioce: ['登录', '注册'],
      login_username: '',
      username: '',
      password: '',
      password2: '',
      phone: '',
      code: '',
      username_error: false,
      username_message: '',
      dingimg: "",
      sinaimg: "",
      // 关键词
      keyword: null,
      imgUrl: '',
      imgCode: '',
      uuid: '',
      msgButtonText: '获取手机验证码',
      is_send: false,
      errorMsg: '',
      phone_error: false,
      phone_message: '',
      msgcode_error: false,
      msgcode_message: '',
      password_error: false,
      password_message: '',
      imgCode_error: false,
      imgCode_message: '',
      count:'',
    };
  },
  beforeMount() {
    this.check_login()
  },
  mounted() {
    this.sinaimg = config['staticurl'] + "sina.png";
    this.dingimg = config['staticurl'] + "dingding.png";
    if (this.$route.query['jwt']) {
      localStorage.setItem('username', this.$route.query['username'])
      localStorage.setItem('uid', this.$route.query['uid'])
      localStorage.setItem('img', this.$route.query['img'])
      localStorage.setItem('token', this.$route.query['jwt'])
    }
    // 生成图片链接
    this.getImgUrl()
  },
  methods: {
    oauth() {
        // 从后端获取 微博登录地址
        oauth_post().then((resp) => {
          console.log(resp)
          //{'code': '0', 'msg': '成功', 'data': {'url': url}}
          let url = resp.data.url
          window.location = url
        })
      },
    getUuid() {
      var d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now()
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
      return uuid
    },
    getImgUrl() {
      let uuid = this.getUuid()
      this.uuid = uuid
      let url = 'http://127.0.0.1:8000/verify/image_codes/?uuid=' + uuid
      this.imgUrl = url
    },
    search(data) {
      if (data == '') {
        this.$Message('请输入关键字')
      } else {
        var params = { q: data }
        search_data_get(params).then(res => {
          if (res.data == '') {
            this.$Message('暂无该信息')
          } else {
            this.$router.push({ path: '/search', query: { data: res.data } })
          }
        })
      }
    },
    // 钉钉登录
    dingding: function () {
      var appid = 'dingoajf8cqgyemqarekhr'
      var redirect_uri = config['baseurl'] + 'dingding_back/'

      var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=' + appid + '&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + redirect_uri

      window.location.href = url;
    },
    // 新浪微博登录
    sina: function () {
      // 组装url
      let url = "https://api.weibo.com/oauth2/authorize?client_id=156528899&redirect_uri=" + config['baseurl'] + "weibo/";
      // 进行跳转
      window.location.href = url;
    },
    // 检查登录状态
    check_login() {
      if (localStorage.getItem('token')) {
        this.login_username = localStorage.getItem('username')
        this.img = localStorage.getItem('img')
        this.uid = localStorage.getItem('uid')
      }
    },
    // 注销
    logout() {
      // localStorage.removeItem('img')
      localStorage.removeItem('token')
      // localStorage.removeItem('type')
      localStorage.removeItem('uid')
      localStorage.removeItem('username')
      this.$router.go(0)
    },
    // 注册
    change_regist() {
      this.opened = true,
        this.login_or_regist = '注册'
    },

    // 判断用户名
    check_username() {
      console.log('判断用户名')
      console.log(this.username == '')
      var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
      if (this.username == '') {
        this.username_message = '用户名不能为空'
        this.username_error = true
        return false
      }
      if (!reg.test(this.username)) {
        this.username_message = '用户名格式不正确'
        this.username_error = true
        return false
      } else {
        // 去后端检查用户名使用数量
        user_count({ type: 'username', data: this.username }).then((res) => {
          console.log(res)
          if (res.data.count > 0) {
            this.username_message = '用户名已存在'
            this.username_error = true
          } else {
            this.username_message = ''
            this.username_error = false
          }
        })
      }
    },

    // 检查手机号是否使用
    check_phone() {
      console.log('检查手机号')
      var reg = new RegExp(/^[1]([3-9])[0-9]{9}$/)
      if (this.phone == '') {
        this.phone_message = '手机号不能为空'
        this.phone_error = true
      }

      if (!reg.test(this.phone)) {
        this.phone_message = '手机号格式不正确'
        this.phone_error = true
        return false
      } else {
        // 去后端查用户数量
        user_count({ type: 'phone', data: this.phone }).then((res) => {
          console.log(res)
          if (res.data.count > 0) {
            this.phone_message = '手机号已存在'
            this.phone_error = true
          } else {
            this.phone_message = ''
            this.phone_error = false
          }
        })
      }
    },
    // 检查密码是否正确
    check_password() {
      console.log('检查两遍密码')
      // debugger
      if (this.password == '') {
        this.password_message = '密码不能为空'
        this.password_error = true
        return false
      }
      if (this.password != this.password2) {
        this.password_message = '两遍密码不一致'
        this.password_error = true
        return false
      }
      if (this.password.length < 6) {
        this.password_message = '密码长度不能小于6位'
        this.password_error = true
        return false
      }
      this.password_message = ''
      this.password_error = false
    },
    // 检查短信验证码
    check_msgcode() {
      if (this.code == '') {
        this.msgcode_message = '短信验证码不能为空'
        this.msgcode_error = true
        return false
      }
      if (this.code.length != 6) {
        this.msgcode_message = '短信验证码为6位'
        this.msgcode_error = true
        return false
      }
      this.msgcode_message = ''
      this.msgcode_error = false
    },
    // 检查图形验证码
    check_imgcode() {
      // debugger
      if (this.imgCode == '') {
        this.imgCode_message = '图形验证码不能为空'
        this.imgCode_error = true
        return false
      }
      if (this.imgCode.length != 4) {
        this.imgCode_message = '图形验证码为4位'
        this.imgCode_error = true
        return false
      }
      this.imgCode_message = ''
      this.imgCode_error = false
    },
    // 注册接口
    regist: function () {
      console.log('register')
      //验证数据
      this.check_username()
      this.check_phone()
      this.check_password()
      this.check_msgcode()
      if (this.username_error || this.phone_error || this.password_error || this.msgcode_error) {
        return false;
      }
      var data = { username: this.username, password: this.password, phone: this.phone, code: this.code }
      register_post(data).then(res => {
        // this.$Message(res.msg)
        if (res.code == '999') {
          this.errorMsg = res.msg
        } else {
          this.errorMsg = '注册成功'
        }

      })
    },
    sendcode() {
      // 0. 判断是否发送中
      if (this.is_send) {
        return
      }
      this.check_phone()
      this.check_imgcode()
      if (this.phone_error || this.imgCode_error) {
        return false
      }
      // 3、短信发送
      // imgCode: '',
      // uuid: '',
      var data = { phone: this.phone, image_code_uuid: this.uuid, image_code: this.imgCode }
      this.is_send = true
      send_phone_code_post(data).then((res) => {
        console.log(res)
        if (res.code != 0) {
          this.errorMsg = res.msg
          return
        }
        let t = 10
        let si = setInterval(() => {
          this.msgButtonText = t
          t = t - 1
          if (t == 0) {
            this.is_send = false
            this.msgButtonText = '获取手机验证码'
            clearInterval(si)
          }
        }, 1000)

        // if (res.data.code == 200) {
        //   console.log('短信发送成功')
        //   alert(res.data.message)
        // } else {
        //   alert(res.data.message)
        // }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 登录
    change_login() {
      this.opened = true,
        this.login_or_regist = '登录'
    },

    login() {
      var data = { username: this.username, password: this.password }
      login_post(data).then(res => {
        localStorage.setItem('username', res.username)
        localStorage.setItem('token', res.token)
        localStorage.setItem('uid', res.id)
        this.login_username = res.username
        this.opened = false
        this.$router.push('/')
      }).catch((err)=>{
        if (err.non_field_errors && err.non_field_errors[0] == '无法使用提供的认证信息登录。') {
          this.errorMsg = '账号或密码错误'
          return
        }
      })

    }

    // login(){
    //     var data = new FormData()
    //     data.append('username', this.username);
    //     data.append('password', this.password);
    //     console.log(data)


    //     this.axios.post('http://127.0.0.1:8000/login/', data).then(resp=>{
    //         console.log(resp.data.message)
    //     })

    // }
    //   login: function() {
    //     this.opened = true,
    //     this.login_or_regist = '登录'
    //     let formData = new FormData()
    //     formData.append('username', '19995522322');
    //     formData.append('password', 'q1992522722');
    //     this.axios({
    //       url: 'http://127.0.0.1:8000/login/',
    //       method: 'post',
    //       data: formData
    //     }).then(res => {
    //       if (res.data.code == 200) {
    //         // 登录成功
    //         alert(res.data.message);
    //         localStorage.setItem("is_login",res.data.username)

    //         console.log(res);
    //         // this.$router.push({
    //         //   'name': "Course"
    //         // })
    //       } else {
    //         console.log(res);
    //         alert(res.data.message)
    //       }
    //     })
    //   },
  }
}
</script>

<style>
@font-face {
  font-family: "lantingxihei";
  src: url("/static/fonts/FZLTCXHJW.TTF");
}

/* modal 模态框*/
#invite-user .modal-body {
  overflow: hidden;
}
#invite-user .modal-body .form-label {
  margin-bottom: 16px;
  font-size: 14px;
}
#invite-user .modal-body .form-invite {
  width: 80%;
  padding: 6px 12px;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 5px;
  float: left;
  margin-right: 10px;
}
#invite-user .modal-body .msg-modal-style {
  background-color: #7dd383;
  margin-top: 10px;
  padding: 6px 0;
  text-align: center;
  width: 100%;
}
#invite-user .modal-body .modal-flash {
  position: absolute;
  top: 53px;
  right: 74px;
  z-index: 999;
}
/* end modal */

.en-footer {
  padding: 30px;
  text-align: center;
  font-size: 14px;
}
.navbar-banner {
  margin-top: 50px;
  background: url("/static/img/homepage-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
